<template>
  <div id="repechage">
    <div v-for="(item, indexs) in Rank" v-if="Rank[0][0].length==8" :key="item.id" :class="{'marginTop' : indexs==3}">
      <div style="text-align: center;margin: 40px auto;font-weight: bold;">第二阶段淘汰赛前八名</div>
      <div style="text-align: center;position: relative;">
        <img width="1100px" src="http://qncdn.tissys.com/admin/static/table.png" alt="">
        <div class="poson" style="position: absolute;top: 22px;left: 50%;width: 100px;margin-left: -90px;height: 30px;">
          <div class="contestant" style="margin-bottom: 57.5px;height: 20px;" v-for="(itme, index) in Rank[indexs][0]"
            :key="`${index}a`">{{typeof itme == 'string' ? (index+1)+' '+itme : (index+1)}}
          </div>
        </div>
        <!-- win -->
        <div>
          <div class="win" style="position: absolute;top: 51px;left: 50%;width: 100px;margin-left: 100px;">
            <div class="contestant" style="position: relative;margin-bottom: 134px;height: 20px;" v-for="(itme, index) in Rank[indexs][1][0]"
              :key="`${index}c`">
              <span style="display: inline-block;width: 205px;text-align: left;margin-left: 8px;">{{ itme.name == 1 ? '' : itme.name }}</span>
              <div style="position: absolute;top: 24px;left: 50%;margin-left: -10px;display: flex;" v-for="(game, gameIndex) in itme.score"
                :key="`${gameIndex}a`">
                <div>{{ item | Score(game) }}</div>
                <div v-if="game.tiebreak">({{ game.tiebreak }})</div>
              </div>
            </div>
          </div>
          <div class="win_FourStrong" style="position: absolute;top: 127px;left: 50%;width: 100px;margin-left: 307px;">
            <div class="contestant" style="position: relative;margin-bottom: 289px;height: 20px;" v-for="(itme, index) in Rank[indexs][1][1]"
              :key="`${index}g`">
              {{ itme.name }}
              <div style="position: absolute;top: 24px;left: 50%;margin-left: -10px;display: flex;">
                <div v-for="(game, gameIndex) in itme.score" :key="`${gameIndex}a`" style="margin-right: 4px;">
                  <div>{{ item | Score(game) }}</div>
                  <div v-if="game.tiebreak">({{ game.tiebreak }})</div>
                </div>
              </div>
            </div>
          </div>
          <div class="FourStrongRanking" style="position: absolute;top: 284px;left: 50%;width: 450px;margin-left: 90px;">
            <span style="white-space: nowrap; width: 105px;display: inline-block;position: relative;" v-for="(itme, index) in Rank[indexs][1][2]"
              :key="`${index}k`">
              {{ itme.name }}
              <div style="position: absolute;top: 35px;left: 50%;margin-left: -25px;width: 66px;display: flex;justify-content: center;">
                <div v-for="(game, gameIndex) in itme.score" :key="`${gameIndex}a`" style="margin-right: 4px;">
                  <div>{{ item | Score(game) }}</div>
                  <div v-if="game.tiebreak">({{ game.tiebreak }})</div>
                </div>
              </div>
            </span>
          </div>
        </div>
        <!-- fail -->
        <div>
          <div class="fail" style="position: absolute;top: 52px;right: 50%;width: 200px;margin-right: 93px;text-align: right;">
            <div class="contestant" style="position: relative;margin-bottom: 135px;height: 20px;margin-right: 5px;"
              v-for="(itme, index) in Rank[indexs][2][0]" :key="`${index}l`">
              <span>{{ itme.name }}</span>
              <div style="position: absolute;top: 24px;right: 0;display: flex;margin-right:30px;">
                <div v-for="(game, gameIndex) in itme.score" :key="`${gameIndex}a`" style="margin-right: 4px;">
                  <div>{{ item | Score(game) }}</div>
                  <div v-if="game.tiebreak">({{ game.tiebreak }})</div>
                </div>
              </div>
            </div>
          </div>
          <div class="fail_FourStrong" style="position: absolute;top: 127px;right: 50%;width: 200px;margin-right: 300px;">
            <div class="contestant" style="position: relative;margin-bottom: 289px;height: 20px;" v-for="(itme, index) in Rank[indexs][2][1]"
              :key="`${index}y`">
              {{ itme.name }}
              <div style="position: absolute;top: 24px;left: 50%;margin-left: -10px;display: flex;">
                <div v-for="(game, gameIndex) in itme.score" :key="`${gameIndex}a`" style="margin-right: 4px;">
                  <div>{{ item | Score(game) }}</div>
                  <div v-if="game.tiebreak">({{ game.tiebreak }})</div>
                </div>
              </div>
            </div>
          </div>
          <div class="failRanking" style="position: absolute;top: 283px;right: 50%;width: 450px;margin-right: 75px;">
            <span style="position: relative;width: 105px;display: inline-block;" v-for="(itme, index) in Rank[indexs][2][2]"
              :key="`${index}C`">
              {{ itme.name }}
              <div style="position: absolute;top: 36px;left: 50%;display: flex;margin-left: -16px;">
                <div v-for="(game, gameIndex) in itme.score" :key="`${gameIndex}a`" style="margin-right: 4px;">
                  <div>{{ item | Score(game) }}</div>
                  <div v-if="game.tiebreak">({{ game.tiebreak }})</div>
                </div>
              </div>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      Rank: Array,
      loadingBox: Boolean,
    },
    filters: {
      Score(item, val) {
        return `${val.top}-${val.bot}`
      },
    },
		created() {
			console.log(this.Rank)
		}
  }
</script>

<style lang="less" scoped>
  .marginTop {
    margin-top: 200px;
  }
</style>
